<template>
  <el-select
    style="background-color: transparent; color: white"
    v-model="value"
    placeholder="请选择各分店书籍"
    @change="changecity()"
  >
    <div class="el-input__wrapper"></div>
    <el-option
      style=""
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
    </el-option>
  </el-select>
</template>
  
  <script>
export default {
  data() {
    return {
      cities: [
        {
          value: "北京",
          label: "北京",
        },
        {
          value: "上海",
          label: "上海",
        },
        {
          value: "南京",
          label: "南京",
        },
        {
          value: "成都",
          label: "成都",
        },
        {
          value: "深圳",
          label: "深圳",
        },
        {
          value: "广州",
          label: "广州",
        },
      ],
      value: "",
    };
  },
  methods: {
    changecity() {
      var data = new FormData();
      data.append("city", this.value);
      this.$axios.post("/getcitybooks", data).then((resp) => {
        this.$emit("citybooks", resp.data);
      });
    },
  },
};
</script>
  <style>
.el-select .el-input__wrapper {
  background-color: transparent;
  color: white;
}
.el-select .el-input__inner {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.801);
  border: rgb(255, 255, 255);
}
</style>